<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>clearfix</title>
	<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		/*.clearfix样式源码*/
		.clearfix:before,.clearfix:after{
			display: table;
  			content: " ";
		}
		.clearfix:after{
			clear: both;	
		}
	</style>
</head>
<body>
	<!-- bootstrap.css 中的clearfix样式能有效清除浮动 -->
	<div class="clearfix" style="border: 1px solid #ff0000;padding: 10px;">
		<div style="border: 1px solid #00ff00;height: 200px;box-sizing: border-box;width: 50%;float: left;"></div>
		<div style="border: 1px solid #0000ff;height: 200px;box-sizing: border-box;width: 50%;float: left;"></div>
	</div>
</body>
<!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> -->
</html>